<template>
  <div class="happen-bill">
    <div class="bank-card-box">
      <div class="item">
        <div class="card-head__logo">
          <img src="@icon/logo-g.png" alt="" />
        </div>
        <span class="span-text">6666****8888</span>
        <div class="card-right__logo">
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
    </div>
    <div class="line-box"></div>
    <van-tabs v-model="active">
      <van-tab title="未出账单">
        <div class="bill-box">
          <div class="general-box">
            <div class="bill-select">
              <div class="select-1">账单明细</div>
              <div class="select-2" @click="amountFlag = !amountFlag">
                <p>人民币</p>
                <div class="card-right__logo">
                  <img src="@icon/arrow-b.png" alt="" />
                </div>
              </div>
            </div>
            <div
              class="h-b-3"
              v-for="(item, index) in installmentType"
              :key="index"
            >
              <div class="collapse-item">
                <div class="l-1" @click="_goPage('billDetail')">
                  <div class="l-1-1">
                    <div class="l-1-1-1">
                      <img src="@icon/矢量智能对象.png" alt="" />
                      <span class="l-1-1-1-1">刷脸消费</span>
                      <span
                        class="l-1-1-1-2"
                        @click.stop="_goPage('installment')"
                        v-if="index == 2"
                        >申请分期</span
                      >
                    </div>
                    <div class="l-1-1-2">
                      <span>-3550.00</span>
                    </div>
                  </div>
                  <div class="l-1-2">
                    <span class="l-50">周大福金饰有限公司</span>
                    <span>2020-04-12</span>
                  </div>
                </div>
                <div class="l-2">
                  <div class="card-right__logo">
                    <img src="@icon/arrow-b.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已出账单">
        <div class="happen-bill-box">
          <div class="h-b-1">
            <div
              v-for="(item, index) in intallmentTab"
              :key="index"
              :class="{ active: transactionIndex == index }"
              @click="transactionIndex = index"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="line-box"></div>
          <div class="h-b-2">
            <div class="t-1" @click="timeFlag = !timeFlag">
              <span>2021-04</span>
              <div class="card-right__logo">
                <img src="@icon/arrow-b.png" alt="" />
              </div>
            </div>
            <div>账户总额￥3667.12</div>
          </div>
          <div class="general-box" v-if="transactionIndex == 0">
            <div
              class="h-b-3"
              v-for="(item, index) in installmentType"
              :key="index"
            >
              <div class="collapse-item">
                <div class="l-1" @click.stop="_goPage('billDetail')">
                  <div class="l-1-1">
                    <div class="l-1-1-1">
                      <img src="@icon/矢量智能对象.png" alt="" />
                      <span class="l-1-1-1-1">刷脸消费</span>
                      <span
                        class="l-1-1-1-2"
                        @click="_goPage('installment')"
                        v-if="index == 2"
                        >申请分期</span
                      >
                    </div>
                    <div class="l-1-1-2">
                      <span>-3550.00</span>
                    </div>
                  </div>
                  <div class="l-1-2">
                    <span class="l-50">周大福金饰有限公司</span>
                    <span>2020-04-12</span>
                  </div>
                </div>
                <div class="l-2">
                  <div class="card-right__logo">
                    <img src="@icon/arrow-b.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="installment-box" v-else>
            <div class="installment-item" v-for="item in installmentList">
              <div class="item-box">
                <span>{{ item.leftValue }}</span>
                <span>{{ item.rightValue }}</span>
              </div>
            </div>
            <div class="line-box"></div>
            <div class="installment-item" v-for="item in installmentType">
              <div class="item-box">
                <span>{{ item.leftValue }}</span>
                <span>{{ item.rightValue }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <div class="bottom-button">
        <div class="left-button">
          立即还款
        </div>
        <div class="right-button">
          我要分期
        </div>
      </div>
      <van-popup v-model="timeFlag" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
        />
      </van-popup>
    </van-tabs>
    <van-popup
      v-model="amountFlag"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ 'min-height': '17%' }"
    >
      <div class="amount-list">
        <h3>币种选择</h3>
        <p>人民币</p>
        <p>美元</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { globalMethods } from '../common/mixins.js'

export default {
  name: 'happenBill',
  mixins: [globalMethods],

  data() {
    return {
      value: '',
      active: 0,
      timeFlag: false,
      amountFlag: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2077, 10, 1),
      currentDate: new Date(),
      activeNames: [],
      dropDownFlag: false,
      intallmentTab: [
        { name: '普通交易' },
        { name: '账单分期' },
        { name: '专项分期' },
      ],
      transactionIndex: 1, // 0,普通交易 1,账单分期 2,专项分期
      installmentList: [
        { leftValue: '分期类型', rightValue: '商户分析' },
        { leftValue: '分期日期', rightValue: '2021-01-22' },
        { leftValue: '总期数', rightValue: '24' },
        { leftValue: '当前期数', rightValue: '18' },
        { leftValue: '剩余期数', rightValue: '6' },
        { leftValue: '分期总本金/币种', rightValue: '10,969.00人民币' },
        { leftValue: '本期应还本金/币种', rightValue: '457,00人民币' },
        { leftValue: '剩余应还本金/币种', rightValue: '2,742.00人民币' },
      ],
      installmentType: [
        { leftValue: '分期类型', rightValue: '商户分析' },
        { leftValue: '分期日期', rightValue: '2021-01-22' },
        { leftValue: '总期数', rightValue: '24' },
      ],
    }
  },

  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
  },
}
</script>

<style lang="stylus" scoped>
/deep/ .van-cell__right-icon
  margin-left 16px

/deep/ .van-cell
  align-items center

/deep/ .van-tab
  border-bottom 2px solid #E6E6E6
  font-size 32px

/deep/ .van-tabs__line
  background #00B893
  width: 126px;

/deep/ .van-tab--active
  color #00B893

.happen-bill
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  padding-bottom 88px

  .bank-card-box
    position relative
    z-index 1000
    background #fff

    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        padding 0 16px
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 48px
    height 48px
    display flex
    justify-content center
    margin-left 16px

    img
      width 100%
      height 100%

    .img2
      width 22px
      height 16px

  .line-box
    height 20px
    background #F7F7F7

  .bill-box
    background #fff

  .happen-bill-box
    background #fff

    .h-b-1
      height 120px
      background #FFFFFF
      display flex
      align-items center
      justify-content space-around

      div
        width 202px
        height 60px
        background #F7F7F7
        border-radius 30px
        color #666666
        font-size 28px
        display flex
        align-items center
        justify-content center

        &.active
          background #FFA900
          color #fff

    .h-b-2
      height 82px
      display flex
      align-items center
      padding 0 32px
      border-bottom 2px solid #E6E6E6
      font-size 28px

      .t-1
        flex 1
        display flex
        align-items center

  .h-b-3
    padding-left 30px
    height 140px
    display flex
    align-items center


  .collapse-item
    display flex
    width: 100%
    height 100%
    align-items center
    border-bottom 2px solid #E6E6E6

    .l-1
      flex 1

      .l-1-1
        display flex
        align-items center

        .l-1-1-1
          flex 1
          display flex
          align-items center
          padding-bottom 20px

          img
            width 36px
            height 36px

          .l-1-1-1-1
            font-size 32px
            color #333333
            margin-left 20px

          .l-1-1-1-2
            display flex
            align-items center
            justify-content center
            width 140px
            height 40px
            font-size 28px
            color #00B893
            border 2px solid #00B893
            border-radius 20px
            padding 0 20px
            margin-left 26px
            letter-spacing 2px

    .l-1-2
      display flex
      justify-content space-between
      align-items center
      color #666666
      font-size 28px

      .l-50
        margin-left 56px

  .l-2
    padding-right 28px


.installment-box
  display flex
  flex-direction column

  .installment-item
    font-size 30px
    height 90px
    padding 0 30px
    color #333

    .item-box
      height 90px
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid #E6E6E6

      &:nth-of-type(1)
        color #666666

.bill-select
  color #333
  background #f7f7f7
  display flex
  align-items center
  justify-content space-between
  height 90px
  font-size 32px
  padding 0 30px

  .select-2
    display flex
    align-items center

.bottom-button
  position fixed
  bottom 0
  left 0
  width 100%
  height 88px
  background #FFFFFF
  border 1px solid #E5E5E5
  display flex
  align-items center
  font-size 34px
  color #FFA900

  div
    flex 1
    display flex
    justify-content center
    align-items center
    height 100%

  .right-button
    background #FFA900
    color #fff
.amount-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6
  p
    margin-left 32px
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px
    border-bottom 1px solid #E6E6E6
</style>
